<template>
  <div class="home">
    <ul v-for="item in state.list" :key="item.id">
      <li>{{item.name}}</li>
    </ul>
    <button @click="go">跳转</button>
  </div>
</template>

<script setup>
import {reactive,ref} from 'vue'
import {useRouter} from 'vue-router'
// ref是定义基本数据类型的，也可以定义对象
const str = ref('字符串')
const title = ref({
  msg:'请求成功',
})
// reactive 定义多个响应数据的，一般是对象
const state = reactive({
  list:[
    {id:1,name:'睡觉',status:true},
    {id:2,name:'吃饭',status:true}
  ]
})
// 路由跳转
const router = useRouter()
const go =()=>{
 router.push({path: '/about',query: {id:1 },
 })
}
</script>